<template>
    <div class="line-tabs">
        <div :class="{'line-tabs-item':true,'active':item.active}" v-for="item in tabList" :key="item.key" @click="handleChangTab(item.key)">{{item.title}}</div>
    </div>
</template>

<script>
export default {
    name: 'LineTabs',
    data() {
        return {
            tabList: [{ title: '基本设置', key: 'user', active: true }, { title: '安全设置', key: 'security', active: false }]
        };
    },
    methods: {
        //切换导航
        handleChangTab(key) {
            const { tabList } = this;
            if (key === 'user') {
                tabList[0].active = true;
                tabList[1].active = false;
            } else {
                tabList[1].active = true;
                tabList[0].active = false;
            }
            this.$emit('changTab', key);
        }
    }
};
</script>

<style lang="less" scoped>
.line-tabs {
    width: 15%;
    border-right: 1px solid #e8e8e8;
    padding: 5px 0;
    .line-tabs-item {
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        padding-left: 20px;
        cursor: pointer;
    }
    .active {
        transition: all 0.5s;
        background: #fdf8ed;
        color: #f2b434;
        border-right: 2px solid #f2b434;
    }
}
</style>
